<template>
	<div class="history">

		<h2 style="background-color: ghostwhite;font-size: 16px;height: 40px;line-height: 45px;color: black;font-weight: 500;">浏览历史</h2>

		<div class="list">
			<ul>
				<li v-for="item in res" :key="item.id">

					<router-link to="">
						<span><i class="el-icon-caret-right"></i>{{item.title}}</span>
					</router-link>

				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	//模拟数据
	let resData = [{
			"id": "1",
			"title": "Vuecli课程讲解"
		},
		{
			"id": "2",
			"title": "前端必学框架"
		},
		{
			"id": "3",
			"title": " 最涨薪PHP项目"
		},
		{
			"id": "4",
			"title": "微信公众平台开发"
		},
		{
			"id": "5",
			"title": " 这是一篇文章，你值得学习"
		}
	]
	export default {
		data() {
			return {
				res: resData
			}
		}
	}
</script>

<style scoped>
	.history {
		background: white;
		height: 315px;
	}

	a {
		text-decoration: none;
		color: gray;
		font-size: 14px;
		font-weight: 300;
		position: relative;
		left: -20px;

	}

	li {
		list-style: none;
		padding: 7px 0px;
	}
</style>
